import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/important_days_provider.dart';
import '../widgets/important_day_card.dart';
import 'add_important_day_screen.dart';

class ImportantDaysScreen extends StatelessWidget {
  const ImportantDaysScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade50,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Consumer<ImportantDaysProvider>(
            builder: (context, provider, child) {
              final upcomingDays = provider.upcomingDays;
              final pastDays = provider.pastDays;
              
              return CustomScrollView(
                slivers: [
                  // 标题
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 24, bottom: 16),
                      child: Text(
                        '重要日子',
                        style: TextStyle(
                          fontSize: 24,
                          fontWeight: FontWeight.bold,
                          color: Colors.pink.shade700,
                        ),
                      ),
                    ),
                  ),
                  
                  // 即将到来的重要日子
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 8),
                      child: Text(
                        '即将到来',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                  ),
                  
                  // 即将到来的重要日子网格
                  SliverPadding(
                    padding: const EdgeInsets.only(bottom: 24),
                    sliver: _buildAdaptiveGrid(
                      context: context,
                      items: upcomingDays,
                      builder: (context, index) => ImportantDayCard(
                        importantDay: upcomingDays[index],
                      ),
                      emptyBuilder: () => Center(
                        child: Padding(
                          padding: const EdgeInsets.all(24),
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.calendar_today,
                                size: 48,
                                color: Colors.grey.shade400,
                              ),
                              const SizedBox(height: 16),
                              Text(
                                '还没有添加重要日子',
                                style: TextStyle(
                                  fontSize: 16,
                                  color: Colors.grey.shade600,
                                ),
                              ),
                              const SizedBox(height: 8),
                              Text(
                                '点击右下角的按钮添加一个吧',
                                style: TextStyle(
                                  fontSize: 14,
                                  color: Colors.grey.shade500,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  
                  // 已过去的重要日子
                  SliverToBoxAdapter(
                    child: Padding(
                      padding: const EdgeInsets.only(bottom: 8),
                      child: Text(
                        '已过去',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                  ),
                  
                  // 已过去的重要日子网格
                  SliverPadding(
                    padding: const EdgeInsets.only(bottom: 80),
                    sliver: _buildAdaptiveGrid(
                      context: context,
                      items: pastDays,
                      builder: (context, index) => ImportantDayCard(
                        importantDay: pastDays[index],
                        isGrayedOut: true,
                      ),
                      emptyBuilder: () => Center(
                        child: Padding(
                          padding: const EdgeInsets.all(24),
                          child: Text(
                            '没有已过去的重要日子',
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.grey.shade500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _showAddImportantDayBottomSheet(context),
        backgroundColor: Colors.pink.shade400,
        child: const Icon(Icons.add, color: Colors.white),
      ),
    );
  }

  // 根据屏幕宽度自适应的网格布局
  Widget _buildAdaptiveGrid<T>({
    required BuildContext context,
    required List<T> items,
    required Widget Function(BuildContext, int) builder,
    required Widget Function() emptyBuilder,
  }) {
    if (items.isEmpty) {
      return SliverToBoxAdapter(child: emptyBuilder());
    }

    // 根据屏幕宽度决定列数和卡片尺寸
    final width = MediaQuery.of(context).size.width;
    int crossAxisCount;
    double childAspectRatio;
    
    if (width > 800) {
      // 平板或大屏：3列
      crossAxisCount = 3;
      childAspectRatio = 1.4;
    } else if (width > 600) {
      // 中等屏幕：2列
      crossAxisCount = 2;
      childAspectRatio = 1.3;
    } else {
      // 手机屏幕：2列紧凑布局
      crossAxisCount = 2;
      childAspectRatio = 1.25; // 适度压缩高度，避免内容溢出
    }
    
    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount,
        childAspectRatio: childAspectRatio,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      delegate: SliverChildBuilderDelegate(
        builder,
        childCount: items.length,
      ),
    );
  }

  void _showAddImportantDayBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) => const AddImportantDayScreen(),
    );
  }
}